<!DOCTYPE HTML>
<html>

<head>
    <title> 详情页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="detail-page">
            <div class="span24">
                <h3>商品品牌<button type="button" id="add-brand-btn" class="pull-right button button-default">添加商品</button></h3>
                <hr>
            </div>
            <div class="detail-section">
                <div class="row detail-row">
                    <div class="span24">
                        <!-- 表格 start-->
                        <div id="grid"></div>
                        <!-- 表格 end-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 初始隐藏 dialog内容 -->
    <div id="content" class=" hide ">
        <form class="form-horizontal ">
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">
                        <s>*</s>品牌名称：</label>
                    <div class="controls">
                        <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">
                        <s>*</s>排序：</label>
                    <div class="controls">
                        <input name="a" type="text" data-rules="{required:true,number:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label mr-10">缩略图：</label>
                    <img src="" width="80" height="80">
                </div>
            </div>
            <div class="row">
                <div class="control-group">
                    <label class="control-label">
                        选择尺码类型:</label>
                    <div class="controls bui-form-group" style="padding-top: 7px">
                        <label class="checkbox">
                            <input name="types" value="1" type="checkbox">鞋码 </label>
                        <label class="checkbox">
                            <input name="types" value="2" type="checkbox">衣码</label>
                        <label class="checkbox">
                            <input name="types" value="3" type="checkbox">儿童鞋码</label>
                        <label class="checkbox">
                            <input name="types" value="3" type="checkbox">儿童服饰码</label>
                        <label class="checkbox">
                            <input name="types" value="3" type="checkbox">配件码</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group">
                    <label class="control-label">
                        默认鞋码表:</label>
                    <div class="controls" style="padding-top: 7px">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="UK" checked="checked"> UK
                        </label>
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="US"> US
                        </label>
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="FR"> FR
                        </label>
                    </div>
                </div>
            </div>
            <div class="row">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <table class="table table-bordered">
                        <thead>
                            <td>UK</td>
                            <td>5.5</td>
                            <td>6.0</td>
                            <td>6.5</td>
                            <td>7.0</td>
                            <td>7.5</td>
                        </thead>
                    </table>
                </div>
            </div>
    </div>
    </form>
    </div>
    <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
    <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
    <script type="text/javascript">
    BUI.use('common/page');
    </script>
    <!-- script start -->
    <script type="text/javascript">
    $("#add-brand-btn").click(function() {
        top.topManager.openPage({
            id: 'add-brand',
            href: 'templates/product/product-brand/product-add-brand.html',
            title: '添加品牌'
        });
    });
    BUI.use(['bui/grid', 'bui/data', 'common/search'], function(Grid, Data, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '排序',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 200
            }, {
                id: '123',
                title: '品牌名称 ',
                elCls: 'center',
                dataIndex: 'b',
                width: 200
            }, {
                title: '品牌别称',
                elCls: 'center',
                dataIndex: 'c',
                width: 200
            }, {
                title: '操作',
                dataIndex: 'f',
                elCls: 'center',
                width: 200,
                renderer: function(value, obj) {
                    var editStr = Search.createLink({ //链接使用 此方式
                            id: 'edit' + obj.id,
                            title: '编辑商品信息',
                            text: '[ 编辑 ] ',
                            href: 'templates/product/product-brand/product-add-brand.html'
                        }),
                        delStr = '<span class="grid-command btn-del">[ 删除 ]</span>'; //页面操作不需要使用Search.createLink
                    return editStr + delStr;
                }
            }],
            data = [{
                id: '1222',
                a: '034',
                b: 'new balance',
                c: 'new balance',
            }, {
                id: '1224',
                a: '045',
                b: 'nike',
                c: 'nike',
            }, {
                id: '1225',
                a: '055',
                b: 'NIKE KIDS',
                c: 'NIKE KIDS',

            }];
        //初始化数据
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'btn-edit', //触发显示Dialog的样式

                editor: {
                    title: '编辑商品品牌',
                    width: 600,
                }
            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                forceFit: true,

                    // 底部工具栏
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [editing], //插件
                store: store
            });

        grid.render();
        //点击操作
        grid.on('itemclick', function(ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-del')) { //点击删除操作
                delFunction(item, itemEl);

            }
        });

        //没有多选插件，删除选中的记录
        function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除记录？', function() {
                var input = itemEl.find('input'),
                    name = itemEl.attr('name');
                if (name) {
                    form.getField(name).remove();
                }

                store.remove(item);
            }, 'question');
        }
    });
    </script>
    <!-- script end -->

    <body>

</html>
